<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天天生鲜-购物车</title>
		<!-- 定义搜索关键词 -->
		<meta name="keywords" content="生鲜,天天,极速">
		<link rel="shortcut icon" href="images/logo.png">
		<!-- 引入外部样式 -->
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<link rel="stylesheet" type="text/css" href="css/cart.css">
	</head>
	<body>
		<!-- 头部 -->
		<div class="header_con">
			<div class="header">
				<div class="welcom fl">欢迎来到天天生鲜</div>
				<div class="fr">
					<div class="login_info fl">
						欢迎: <em>yc</em>
					</div>
					<div class="login_btn fl">
						<a href="login.html">登录</a>
						<span>|</span>
						<a href="register.html">注册</a>
					</div>
					<div class="user_link fl">
						<span>|</span>
						<a href="#">用户中心</a>
						<span>|</span>
						<a href="#">我的购物车</a>
						<span>|</span>
						<a href="#">我的订单</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 搜索框 -->
		<div class="search_bar clearfix">
			<a href="index.html" class="logo fl">
				<img src="images/logo.png" alt="">
			</a>
			<div class="search_con fl">
				<form action="">
					<input type="text" placeholder="搜索商品" class="input_text fl" name="key_words">
					<input type="button" value="搜索" class="input_btn fr" >
				</form>
			</div>
			<div class="guest_cart fr">
				<a href="#" class="cart_name fl">我的购物车</a>
				<div class="goods_count fl" id="show_count">1</div>
			</div>
		</div>	
		<!-- 购物车主体 -->
		<div class="cart_con">
			<h2 class="total_count">全部商品<em>1</em></h2>
			<div class="cart_list_th clearfix">
				<ul>
					<li class="col01">商品名称</li>
					<li class="col02">商品单位</li>
					<li class="col03">商品价格(元)</li>
					<li class="col04">数量</li>
					<li class="col05">小计</li>
					<li class="col06">操作</li>
				</ul>
			</div>
			<div class="cart_list_td clearfix">
				<ul>
					<li class="col01"><input type="checkbox" checked=""></li>
					<li class="col02"><img src="images/goods/goods003.jpg" alt=""></li>
					<li class="col03">牛奶草莓<br><em>16.80元/500g</em></li>
					<li class="col04">500g</li>
					<li class="col05">16.80</li>
					<li class="col06">
						<div class="num_add clearfix">
							<a href="javascript:lose(this)" class="minus fl">-</a>
							<input type="text" value="1" class="num_show fl">
							<a href="javascript:add(this)" class="add fl">+</a>
						</div>
					</li>
					<li class="col07">16.80</li>
					<li class="col08"><a href="javascript:void(0);" onclick="">删除</a></li>
				</ul>
			</div>
			<div class="cart_list_td clearfix">
				<ul>
					<li class="col01"><input type="checkbox" checked></li>
					<li class="col02"><img src="images/goods/goods003.jpg" alt=""></li>
					<li class="col03">牛奶草莓<br><em>16.80元/500g</em></li>
					<li class="col04">500g</li>
					<li class="col05">16.80</li>
					<li class="col06">
						<div class="num_add clearfix">
							<a href="javascript:lose()" class="minus fl">-</a>
							<input type="text" value="1" class="num_show fl">
							<a href="javascript:add()" class="add fl">+</a>
						</div>
					</li>
					<li class="col07">16.80</li>
					<li class="col08"><a href="javascript:;">删除</a></li>
				</ul>
			</div>
			<div class="setElements">
				<ul>
					<li class="col01"><input type="checkbox" checked="" id="all"></li>
					<li class="col02"><label for="all">全选</label></li>
					<li class="col03">
						合计(不含运费):<span>￥</span><em id="totalPrice">16.80</em>元
						<br>共计<b id="totalNumbers">1</b>件商品
						</li>
					<li class="col04"><a href="javascript:;">去结算</a></li>
				</ul>
			</div>
			
		</div>
		<!-- 尾部版权 -->
		<div class="footer">
			<div class="foot_link">
				<a href="#">关于我们</a><span> | </span>
				<a href="#">联系我们</a><span> | </span>
				<a href="#">招聘广告</a><span> | </span>
				<a href="#">友情链接</a>
			</div>
			<p>Copyright &copy; 2021 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
			<p>电话：0734-8355998 湘ICP备16015987号</p>
		</div>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			//默认全选
			$("#all").click(function()){
				// 获取全选是否选中
				let flag = $(this.)
			}
			
			// 商品减少的方法
			function lose(obj){
				// 获取购物车点击商品的数量
				let num = #(obj).next().val();
				console.log(num);
				// 判断该商品数量是否大于1
				if(num <= 1){
					return ;
				}
				num--;
				// 数量写入标签中
				$(obj).next().val(num); 
			}
			
			//添加商品
			function add(obj){
				console.log(document.getElementsByClassName("num_show")[0].value());
				console.log($("num_show").eq(0).val());
			}
			
			// 删除界面商品效果
			function delGoods(){
				
			}
			// 计算商品总额的方法
			function productetCount(){
				let total = 0;
				let price;
				let number;
				let numbers;
				let myul = $(".cart_list_td ul");//所有商品标签
				console.log($myul);
				// 循环遍历商品
				for(let i = 0, len = $myul.length; i < len; i++){
					price = myul.eq(i).find(".col05").html();
					number = myul.eq(i).find(".col06 input").val();
					
					total += price*number;
					numbers += number * 1.0;
				}
				// 渲染数据
				$("#totalPrice").html(total.toFixed(2));
				$("")
			}
		</script>
	</body>
</html>
